/**
 * Created by fangshufeng on 2018/3/2.
 */

import React from 'react'
import  InfiniteScroll from 'react-infinite-scroller'
import {
    Menu, Checkbox, Button
} from 'antd';

const SubMenu = Menu.SubMenu;
const FormItem = Menu.Item;


export  default  class MockHistory extends React.Component {

    formItems = (items, superTag, superKey) => {
        let itemsLists = [];
        for (let i = 0; i < items.length; i++) {
            const tag = superTag + i;
            const item = items[i];
            itemsLists.push(<FormItem key={superKey + i}>
                <span style={{color: '#1890ff', textAlign: 'center'}}>{tag}
                </span>
                <Checkbox style={{marginLeft: 250, display: 'inline-block'}}
                          onChange={(e) => {
                              this.props.checkboxAction(e.target.checked, superKey, i, tag);
                          }}
                          checked={item.checked}
                          disabled={item.disabled}
                />
                {/*<Button type='danger'*/}
                        {/*style={{*/}
                            {/*fontSize: 10,*/}
                            {/*height: 20,*/}
                            {/*width: 40,*/}
                            {/*padding: 0,*/}
                            {/*display: 'inline-block',*/}
                            {/*marginLeft: 20*/}
                        {/*}}*/}
                        {/*onClick={() => {*/}
                            {/*this.props.deleteAction(superKey, i );*/}
                        {/*}}*/}
                        {/*disabled={item.disabled}*/}
                {/*>删除</Button>*/}
            </FormItem>)
        }
        return itemsLists;
    };

    subViews = () => {
        let viewLists = [];
        let allIndex = 0;
        for (let i = 0; i < Object.keys(this.props.dataDic).length; i++) {
            const menuKey = Object.keys(this.props.dataDic)[i];
            const items = this.props.dataDic[menuKey];
            const tag = 'M' + i;
            viewLists.push(<SubMenu key={menuKey}
                                    title={<div><span style={{
                                        color: '#1890ff',
                                        fontSize: 18
                                    }}>{tag} &nbsp;</span>{menuKey}
                                    </div>}>
                {this.formItems(items, tag, menuKey)}
            </SubMenu>);

            allIndex += items.length;
        }
        return viewLists;
    };

    render() {
        const openKeys = this.props.defaultOpenKey;

        const  selectedKey = this.props.defaultSelectedKey;

        let  selectedKeys = [];
        if (selectedKey === null) {
            selectedKeys = []
        }else  {
            selectedKeys.push(selectedKey);
        }
        console.log('展示的keys',selectedKeys)

        return <div style={{
            height: 700 * 0.5,
            marginRight: 10,
        }}>
            <div style={{color: "#92cdec"}}>Mock列表</div>

            <div style={{
                borderWidth: 3,
                borderColor: "#92cdec",
                borderStyle: 'solid',
                borderRadius: 4,
                overflow: 'auto',
                height: 280,
                marginTop: 15,
                ...this.props.style
            }}>


                <InfiniteScroll
                    initialLoad={false}
                    pageStart={0}
                    loadMore={false}
                    hasMore={false}
                    useWindow={false}
                >
                    <Menu
                        mode="inline"
                        openKeys={openKeys}
                        onOpenChange={(openKeys) => {this.props.groupClick(openKeys)}}
                        selectedKeys={selectedKeys}
                        onClick={(e) => this.props.onlyRowClick(e.keyPath[1], parseInt(e.keyPath[0].slice(e.keyPath[1].length)))}
                    >
                        {this.subViews()}
                    </Menu>
                </InfiniteScroll>
            </div>
        </div>
    }
}